<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数练习</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad"></div>
    <script>
        //点击盒子3秒变背景色
        let ad = document.getElementById('ad');
        //  ad.addEventListener("click",function(){})
        ad.onclick = () => {
            setTimeout(() => {
                ad.style.background = 'pink';
                //this代替ad会未定义？
            }, 3000);
        }

        //从数组中返回偶数元素
        const arr = [2, 5, 6, 9, 7];
        let ou = [];
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] % 2 == 0) {
                ou.push(arr[i]);
            }
        }
        console.log(ou);
        const ou1 = arr.filter(function (item) {
            if (item % 2 == 0) {
                return true;
            } else {
                return false;
            }
        })
        console.log(ou1);             //true就保留，false不保留
        const ou2 = arr.filter(item => item % 2 == 0)
        console.log(ou2);
        //箭头函数不适用与this有关的回调
    </script>
</body>

</html>